<template>
  <Card style="margin:16px;">
    <div class="item-wrap">
      <div>
        <Avatar shape="square" style="width:64px;height:64px;margin: 8px" :src="img"></Avatar>
      </div>
      <div class="middle-part">
        <h2><router-link :to="link">{{name}}</router-link></h2>
        <p class="item-desc">{{summary}}</p>
      </div>
      <div class="right-part">
        <div>{{price}}</div>
        <div>
          <Button type="warning" @click="addCart">加入购物车</Button>
        </div>
      </div>
    </div>
  </Card>
</template>

<script>
export default {
  name: 'goods-item',
  props: {
    id: Number,
    name: String,
    summary: String,
    img: String,
    price: Number,
    cate: Number,
    color: Array,
    size: Array
  },
  data: () => {
    return {}
  },
  computed: {
    link () {
      return '/mall/detail/' + this.id
    }
  },
  methods: {
    addCart () {
      this.$emit('add-cart', {
        id: this.id,
        num: 1,
        details: {
          size: this.size[0],
          color: this.color[0]
        }
      })
    }
  }
}
</script>

<style lang="less">
.item-wrap{
  display: grid;
  grid-template-columns: 90px auto 100px;
  .item-desc{
    line-height: 28px;
    overflow: hidden;
    text-overflow: ellipsis;
    display:-webkit-box; //作为弹性伸缩盒子模型显示。
    -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
    -webkit-line-clamp:2;
  }
}
</style>
